<template>
  <div class="national-day-avatar">
    <div class="container">
      <h1>国庆头像生成器</h1>
      <div class="avatar-wrapper">
        <div class="arrow arrow-left" @click="changeOverlay(-1)">
          <el-icon><ArrowLeft /></el-icon>
        </div>
        <div class="avatar-container">
          <img :src="avatarUrl" alt="头像" class="avatar-image" v-if="avatarUrl">
          <div class="upload-hint" v-else @click="uploadAvatar">
            <el-icon :size="40"><Plus /></el-icon>
            <p>点击上传头像</p>
          </div>
          <img :src="overlayUrl" alt="国庆装饰" class="overlay-image" v-if="avatarUrl">
        </div>
        <div class="arrow arrow-right" @click="changeOverlay(1)">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
      <div class="button-group">
        <el-button type="primary" @click="uploadAvatar">
          <el-icon><Upload /></el-icon>
          上传头像
        </el-button>
        <el-button type="success" @click="downloadAvatar" :disabled="!avatarUrl">
          <el-icon><Download /></el-icon>
          下载头像
        </el-button>
        <el-button type="warning" @click="goToHomepage">
          <el-icon><Back /></el-icon>
          返回
        </el-button>
      </div>
      <input type="file" ref="fileInput" @change="handleFileChange" accept="image/*" class="hidden-input">
      <div class="description">
        <h3>关于国庆头像生成器</h3>
        <ol>
          <li>本工具可以在您上传的头像图片上添加精美的国庆元素，让您的头像更具节日氛围。</li>
          <li>点击"上传头像"按钮，选择您喜欢的本地头像进行上传。</li>
          <li>使用左右箭头切换不同的国庆装饰样式，为您的头像选择最合适的装饰。</li>
          <li>点击"下载头像"按钮，将生成的国庆头像保存到本地，随时使用。</li>
        </ol>
      </div>

      <el-dialog
        title="裁剪头像"
        v-model="dialogVisible"
        width="50%"
        :before-close="handleDialogClose"
      >
        <div class="cropper-container">
          <img ref="cropperImage" :src="tempImageUrl" style="max-width: 100%;">
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="cropImage">确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowLeft, ArrowRight, Plus, Upload, Download, Back } from '@element-plus/icons-vue'
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'

const router = useRouter()
const avatarUrl = ref('')
const overlayUrl = ref('/images/touxiang_guoqing/1.png')  // 修改图片路径
const overlayIndex = ref(1)
const totalOverlays = 28  // 根据实际的装饰图片数量设置
const dialogVisible = ref(false)
const tempImageUrl = ref('')
const fileInput = ref(null)
const cropperImage = ref(null)
let cropper = null

const uploadAvatar = () => {
  fileInput.value.click()
}

const handleFileChange = (event) => {
  const file = event.target.files[0]
  if (file) {
    const reader = new FileReader()
    reader.onload = (e) => {
      tempImageUrl.value = e.target.result
      dialogVisible.value = true
      nextTick(() => {
        initCropper()
      })
    }
    reader.readAsDataURL(file)
  }
}

const initCropper = () => {
  if (cropper) {
    cropper.destroy()
  }
  cropper = new Cropper(cropperImage.value, {
    aspectRatio: 1,
    viewMode: 1,
    dragMode: 'move',
    autoCropArea: 1,
    restore: false,
    modal: false,
    guides: false,
    highlight: false,
    cropBoxMovable: false,
    cropBoxResizable: false,
    toggleDragModeOnDblclick: false,
  })
}

const handleDialogClose = () => {
  if (cropper) {
    cropper.destroy()
    cropper = null
  }
  dialogVisible.value = false
}

const cropImage = () => {
  if (cropper) {
    const canvas = cropper.getCroppedCanvas({
      width: 300,
      height: 300
    })
    avatarUrl.value = canvas.toDataURL('image/png')
    handleDialogClose()
    ElMessage.success('头像上传成功！')
  }
}

const changeOverlay = (direction) => {
  overlayIndex.value = (overlayIndex.value - 1 + direction + totalOverlays) % totalOverlays + 1
  overlayUrl.value = `/images/touxiang_guoqing/${overlayIndex.value}.png`  // 修改图片路径
}

const downloadAvatar = () => {
  if (!avatarUrl.value) {
    ElMessage.error('请先上传头像')
    return
  }

  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')
  canvas.width = 300
  canvas.height = 300

  const avatarImg = new Image()
  avatarImg.crossOrigin = 'anonymous'
  avatarImg.onload = () => {
    ctx.drawImage(avatarImg, 0, 0, 300, 300)

    const overlay = new Image()
    overlay.crossOrigin = 'anonymous'
    overlay.onload = () => {
      ctx.drawImage(overlay, 0, 0, 300, 300)
      canvas.toBlob((blob) => {
        const url = URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.download = '国庆头像.png'
        link.href = url
        link.click()
        URL.revokeObjectURL(url)
      })
    }
    overlay.src = overlayUrl.value
  }
  avatarImg.src = avatarUrl.value
}

const goToHomepage = () => {
  router.push('/')
}

onBeforeUnmount(() => {
  if (cropper) {
    cropper.destroy()
  }
})
</script>

<style lang="scss" scoped>
.national-day-avatar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #e53935 0%, #e35d5b 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;

  .container {
    max-width: 1000px;
    width: 98%;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    padding: 25px;
    box-sizing: border-box;

    h1 {
      text-align: center;
      color: #D4380D;
      font-size: 2.5em;
      margin: 0 0 25px 0;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    }

    .avatar-wrapper {
      position: relative;
      width: 300px;
      height: 300px;
      margin: 0 auto 30px;
      display: flex;
      justify-content: center;
      align-items: center;

      .avatar-container {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        position: relative;
        background-color: #f8f9fa;

        .avatar-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .overlay-image {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
        }

        .upload-hint {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          color: #909399;
          transition: all 0.3s ease;

          &:hover {
            background-color: rgba(0, 0, 0, 0.02);
          }

          p {
            margin: 10px 0 0;
            font-size: 14px;
          }
        }
      }

      .arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(255, 255, 255, 0.8);
        color: #D4380D;
        cursor: pointer;
        transition: all 0.3s ease;
        z-index: 10;
        border-radius: 50%;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

        &:hover {
          background-color: #D4380D;
          color: white;
          transform: translateY(-50%) scale(1.1);
        }

        &.arrow-left {
          left: -20px;
        }

        &.arrow-right {
          right: -20px;
        }
      }
    }

    .button-group {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin-bottom: 30px;

      .el-button {
        min-width: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;

        .el-icon {
          margin-right: 6px;
        }

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
      }
    }

    .description {
      background-color: #FFF7E6;
      border: 1px solid #FFE58F;
      padding: 20px;
      border-radius: 10px;
      text-align: left;

      h3 {
        color: #D4380D;
        margin: 0 0 15px 0;
        font-size: 1.2em;
      }

      ol {
        margin: 0;
        padding-left: 20px;
        color: #666;

        li {
          margin-bottom: 10px;
          line-height: 1.5;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }

    .hidden-input {
      display: none;
    }

    .cropper-container {
      width: 100%;
      height: 400px;
      background-color: #f8f9fa;
      border-radius: 8px;
      overflow: hidden;
    }
  }
}

@media (max-width: 768px) {
  .national-day-avatar {
    padding: 10px;

    .container {
      padding: 15px;

      h1 {
        font-size: 24px;
        margin-bottom: 20px;
      }

      .avatar-wrapper {
        width: 250px;
        height: 250px;

        .arrow {
          width: 32px;
          height: 32px;

          &.arrow-left {
            left: -16px;
          }

          &.arrow-right {
            right: -16px;
          }
        }
      }

      .button-group {
        flex-direction: column;
        gap: 10px;

        .el-button {
          width: 100%;
        }
      }

      .description {
        padding: 15px;

        h3 {
          font-size: 16px;
        }

        ol {
          font-size: 14px;
        }
      }

      .cropper-container {
        height: 300px;
      }
    }
  }
}
</style>
